<template>
  <view class="mine-box pl-30 pr-30 page-container">
    <view class="mine-main min100">
      <u-tabs
          font-size="26"
          active-color="#e66633"
          inactive-color="#3c3c3c"
          bg-color="transparent"
          :list="tabs"
          :is-scroll="true"
          :current="current"
          @change="change"
      ></u-tabs>

      <view class="mine-main-ul" v-if="headIndex == 0">
        <view @click="toUsersGoodsListPage(item)" class="mine-main-li mb-20" v-for="(item,index) in list" :key="index">
          <view class="mine-main-head flex1">
            <view class="mine-main-img">
              <image :src="item.image" mode="aspectFill"></image>
            </view>
            <view class="mine-main-right flex-1">
              <view class="mine-main-name size-30 white">{{ item.name }}</view>
              <view class="flex">
                <view class="mine-main-title size-26" :class="{'blue':item.status == 2,'red':item.status == 3}">{{ getStatus(item) }}</view>
              </view>

              <view class="mine-main-price flex1 flex-bottom flex-between">
                <text>
                  <text>￥</text>
                  <text>{{ item.price }}</text>
                </text>
                <text style="font-size: 34rpx;">{{ item.goods_count_num }}个</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="mine-main-ul" v-else>
        <view
            v-show="list.length!==0"
            @click="goDetails(item.id)"
            class="mine-main-li mb-20"
            v-for="(item, index) in list"
            :key="index"
        >
          <view class="mine-main-head flex1">
            <view class="mine-main-img">
              <image :src="item.image" mode="aspectFill"></image>
            </view>
            <view class="mine-main-right flex-1">
              <view class="flex">
                <view class="mine-main-name size-30 white">{{
                    item.name
                  }}</view>
                <view
                    class="mine-main-title size-26"
                    :class="{ blue: item.status == 2, red: item.status == 3 }"
                >{{ getStatus(item) }}</view
                >
              </view>

              <!-- <view class="flex"> -->

              <view class="white size-28" v-if="headIndex == 0 && item.stock"
              >{{ item.number_f }}/{{ item.stock }}</view
              >
              <!-- </view> -->

              <view class="mine-main-price flex1" style="align-items: center">
                <view style="position: relative; top: 10rpx">
                  <text>￥</text>
                  <text>{{ item.price }}</text>
                </view>
                <view
                    class="mine-main-footer flex1 flex-middle mt-10 flex-end"
                    style="margin-left: auto"
                    v-if="item.status == 1 || item.status == 2"
                >
                  <template v-if="item.status == 1">
                    <u-button
                        class="pink"
                        hover-class="none"
                        v-if="headIndex == 0 && helpContent.goods_status == 1"
                        @click.stop="changeItem(item, index, 1)"
                    >转赠</u-button
                    >
                    <u-button
                        v-if="helpContent.is_trade == 1"
                        class="blue"
                        hover-class="none"
                        @click.stop="changeItem(item, index, 2)"
                    >挂售</u-button
                    >
                    <u-button
                        class="red"
                        hover-class="none"
                        v-if="headIndex == 1"
                        @click.stop="changeItem(item, index, 3)"
                    >开盒</u-button
                    >
                  </template>
                  <u-button
                      class="red"
                      hover-class="none"
                      v-if="item.status == 2"
                      @click.stop="changeItem(item, index, 4)"
                  >{{ item.is_show == 1 ? "下架" : "上架" }}</u-button
                  >
                </view>
              </view>
            </view>
          </view>
        </view>

        <empty v-if="list.length===0"></empty>

      </view>
    </view>

    <!-- 拆开结果 -->
    <u-popup v-model="openPop" class="openWrap" mode="center" border-radius="20" width="500rpx;">
      <view class="popWrap text-center size-24">
        <image :src="openfig.image" class="openImg radius-20"></image>
        <view class="white mb-20 mt-40">
          {{openfig.name}}
        </view>
        <view class="gray-2">
          价值：<text class='red'>￥{{openfig.price}}</text>
        </view>
      </view>
      <image @click="openPop = false" src="../../static/close.png" class="closeIcon" mode=""></image>
    </u-popup>

  </view>
</template>
<script>
import tab from "../../components/tab.vue";
export default {
  components: {
    tab,
  },
  data() {
    return {
      userInfo: {},
      status: 0, //
      tabs: [
        // {
        //   name: "全部",
        //   type: 0,
        // },
        {
          name: "持有中",
          type: 1,
        },
        {
          name: "挂售中",
          type: 2,
        },
        {
          name: "交易中",
          type: 3,
        },
        {
          name: "已出售",
          type: 4,
        },
        {
          name: "已转赠",
          type: 5,
        },
        {
          // name: "已合成",
          name: "已打开",
          type: 6,
        },
      ],
      list: [],
      headIndex: 1, //
      current: 0,
      increaseShow: false, //转增
      saleShow: false, //
      openShow: false,
      item: {}, //选中的元素
      transfer: {
        id: "",
        phone: "",
        captcha: "",
      },
      sale: {
        id: "",
        price: "",
        captcha: "",
      },
      bjImage: "/h5/static/mine/2.png", //背景图
      codeText: "", //
      helpContent: {}, //


      // 开盲盒
      openfig: {},
      openPop: false,


      boxId: 0,
      boxName: '',
    };
  },
  onLoad(option) {
    this.getUserInfo();
    this.boxName = option.boxName || '我的盲盒';
    this.boxId = parseInt(option.boxId || 0);
    this.status = parseInt(option.current || 0);
    uni.setNavigationBarTitle({
      title: this.boxName,
    });
    this.change(this.status);
  },
  methods: {
    toUsersGoodsListPage(item) {
      uni.navigateTo({
        url: `/pages/my/usersGoodsList?current=${this.current}&goodsId=${item.goods_id}&goodsName=${item.name}`,
      });
    },
    getUserInfo() {
      this.$http("api/user/userInfo")
          .then((res) => {
            this.userInfo = res;
          })
          .catch((err) => {
            console.log(err);
          });
    },
    goDetails(id) {
      uni.navigateTo({
        url:
            this.headIndex == 0
                ? `/pages/my/collectDetails?id=${id}`
                : `/pages/my/boxDetails?id=${id}`,
      });
    },
    getStatus(item) {
      let txt = "";
      switch (item.status) {
        case 1:
          txt = "持有中";
          break;
        case 2:
          txt = item.is_show == 1 ? "挂售中" : "";
          break;
        case 3:
          txt = "交易中";
          break;
        case 4:
          txt = "已出售";
          break;
        case 5:
          txt = "已转赠";
          break;
        case 6:
          // txt = this.current == 0 ? "已合成" : "已打开";
          txt = "已打开";
          break;
        default:
          break;
      }
      return txt;
    },
    changeHead(index) {
      this.current = 0;
      this.status = 0;
      this.headIndex = index;
      this.getUsersGoodsList();
    },
    change(index) {
      this.current = index;
      this.status = this.tabs[index].type;
      this.getUsersGoodsList();
    },
    changeItem(item, index, type) {
      if (type == 1) {
        this.item = item;
        this.transfer.id = item.id;
        this.increaseShow = true;
      } else if (type == 2) {
        this.item = item;
        this.sale.id = item.id;
        this.saleShow = true;
        // uni.showModal({
        //     title: '提示',
        // 		content:'是否确认挂售到市场？',
        //     success: function (res) {
        //         if (res.confirm) {
        // 					console.log(res);
        //             console.log('用户点击确定');
        //         } else if (res.cancel) {
        //             console.log('用户点击取消');
        //         }
        //     }
        // });
      } else if (type == 3) {
        uni.showModal({
          content: "立即拆开?",
          confirmColor: "#EFE0C0",
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '正在开启..',
                mask: true,
              });
              this.$http(
                  "api/orders/boxOpen",
                  {
                    id: item.id,
                    captcha: "123456",
                  },
                  "POST"
              ).then((res) => {
                this.getUserInfo();
                this.getUsersGoodsList();
                this.openfig = res;
                this.openPop = true;
              }).finally(() => uni.hideLoading());
            } else if (res.cancel) {
              uni.showToast({
                title: "取消操作!",
                icon: "none",
              });
            }
          },
        });
      } else if (type == 4) {
        let msg = item.is_show == 1 ? "下架" : "上架";
        uni.showModal({
          content: `是否确认${msg}？`,
          success: (res) => {
            if (res.confirm) {
              this.$http(
                  this.headIndex == 0
                      ? "api/orders/goodsUpdateShow"
                      : "api/orders/boxUpdateShow",
                  {
                    id: item.id,
                    is_show: item.is_show == 1 ? 0 : 1,
                  },
                  "POST"
              ).then((res) => {
                uni.showToast({
                  title: "操作成功!",
                  icon: "none",
                });
                this.getUsersGoodsList();
              });
            } else if (res.cancel) {
              uni.showToast({
                title: "取消操作!",
                icon: "none",
              });
            }
          },
        });
      }
    },
    getUsersGoodsList() {
      this.$http(
          this.headIndex == 0
              ? "api/orders/usersGoodsList"
              : "api/orders/usersBoxList",
          {
            boxId: this.boxId,
            status: this.status,
          }
      )
          .then((res) => {
            this.list = res;
          })
          .catch((err) => {
            console.log(err);
          });
    },
  },
};
</script>
<style lang="less" scoped>
.white{
  color: #3c3c3c;
}
.mine-main {
  position: relative;
  //background: rgba(41, 42, 63, 0.4);
  //border: 1rpx solid rgba(255, 255, 255, 0.4);
  //border-radius: 10rpx 10rpx 0rpx 0rpx;
  padding-top: 90rpx;
  border-bottom: none;
}
.mine-main-top {
  .mine-main-top-li {
    width: max-content;
    position: relative;
    height: 50rpx;
    padding-left: 30rpx;
    image {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      left: 0;
    }
    text {
      flex: 1;
      z-index: 9;
      color: #3c3c3c;
      font-size: 32rpx;
    }
  }
}
.mine-main-ul {
  overflow: hidden;
  margin-top: 30rpx;
  .mine-main-li {
    padding: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    .mine-main-img {
      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 6rpx;
      }
      margin-right: 20rpx;
    }
    .mine-main-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .mine-main-title {
        font-weight: 500;
        color: #d7b92e;

        background: linear-gradient(0deg, #a776f7 0%, #6990f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .blue {
        color: #d7b92e;

        background: linear-gradient(0deg, #fed05e 0%, #edafff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .red {
        color: #ea232c;
      }
      .mine-main-price {
        text {
          color: #3c3c3c;
          font-size: 28rpx;
          line-height: 1;
          &:last-child {
            font-size: 36rpx;
          }
        }
      }
    }
    .mine-main-footer {
      .blue,
      .red,
      .pink {
        width: 130rpx;
        height: 56rpx !important;
        padding: 0;
        margin: 0;
        color: #ffffff;
        font-size: 30rpx;
        border-radius: 28px;
        &::after {
          border: none;
        }
      }
      .blue {
        margin-right: 20rpx;
        background: linear-gradient(90deg, #a776f7 0%, #6990f7 100%);
      }
      .red {
        background: linear-gradient(90deg, #eea634, #de2d32);
      }
      .pink {
        margin-right: 20rpx;
        background: linear-gradient(90deg, #e6867f 0%, #e692ec 100%);
      }
    }
  }
}

.openWrap {
  /deep/ .u-mode-center-box {
    background-color: transparent;
  }
}

.popWrap {
  background: url(../../static/openImg.png) 0 0 no-repeat;
  background-size: 100% 100%;
  width: 500rpx;
  height: 526rpx;
  padding-top: 128rpx;
  position: relative;

  .openImg {
    width: 240rpx;
    height: 240rpx;
    background: #666;
  }
}

.closeIcon {
  width: 60rpx;
  height: 60rpx;
  margin: 30rpx auto;
  display: block;
}


.u-tabs{
  width: calc(100vw - 60rpx);
  position: fixed;
  top: var(--window-top);
  background: #f5f5f5 !important;
  z-index: 100;
}

.page-container {
  background: #f5f5f5;
}
</style>
